<template>
	<view>
		<!-- 1.数据绑定（属性）vue 语法：{{}}  v-bind|:-->
			<!-- <view class="">用户姓名是：{{name}}</view>
			<image :src="src" ></image> -->
		<!-- 2.条件判断  vue  v-if  v-else-if  v-else  v-show | wx:if VS hidden-->
			<!-- <view v-if="score >90" >优秀</view>
			<view v-else-if="score >70" >良好</view>
			<view v-else>一般</view> -->
		<!-- 3.条件渲染  vue  v-for in|of      -->
			<!-- <view v-for="(item,index) of array" :key="index">
				下标是：{{index}}--值 是{{item}}
			</view> -->
			<!-- 注意事项： -->
				<!-- 1.循环整数 10  h5端值是从1开始  条件编译 -->
				<!-- <view v-for="(item,index) in 10" :key="index">
					下标是：{{index}}---值 是{{item}}
				</view> -->
				<!-- 2.循环对象 h5端支持三个参数 value  key  index -->
					<!-- <view v-for="(value,key,index) in user" :key="index">
						下标是：{{index}}---key是{{key}}---值是{{value}}
					</view> -->
		<!-- 4.计算属性 和 监听器 -->
			<!-- <view class="">和是：{{count}}</view> -->
			<!-- 搜索：<input type="text" v-model="keywords"> -->
			
		<!-- 5.静态资源引入路径写法  相对  绝对 -->
			<!-- 1.模板中 img vedio==》src 绝对：/|@(src)   相对:../ -->
			<!-- 2.js  .js  绝对：必须以@(src)开头   相对:../ -->
			<!-- 3.css .css .less .scss. styles  绝对：/|@(src)   相对:../ -->
		
		<!-- 6.样式基本配置 -->
			<!-- 1.rpx -->
			<!-- 2.配置 px VS rpx 比值 -->
				<!-- <view class="box"></view> -->
			<!-- 3.使用css 样式预处理器 插件方式使用即可 -->
		
	</view>
</template>

<script>
	export default {
		// 监听器
		watch:{
			keywords(newV,oldV){
				console.log(newV,oldV)
			}
		},
		// 计算属性
		computed:{
			count(){
				return this.num1+this.num2
			}
		},
		data() {
			return {
				name:"李四",
				src:"../../static/logo.png",
				score:75,
				array:[100,90,60,80,50],
				user:{id:11,name:"鲁班",age:20},
				num1:2,
				num2:3,
				keywords:""
			}
		},
		methods: {
			
		}
	}
</script>

<style>
	.box{
		width: 200rpx;
		height: 200rpx;
	}
</style>
